<template>
  <div class="comment-reply">
    <!-- 导航栏 -->
    <van-nav-bar :title="comment.reply_count ? comment.reply_count+'条回复':'暂无回复'">
      <van-icon
        slot="left"
        name="cross"
        @click="$emit('click-close')"
      />
    </van-nav-bar>
    <!-- /导航栏 -->

    <!-- 当前评论项 -->
    <comment-item
      :comment-info="comment"
    />
    <!-- /当前评论项 -->

    <van-cell title="所有回复" />

    <!-- 评论的回复列表 -->
    <comment-list
      :source-id="comment.com_id"
      type="c"
      :list="replyCommentList"
    />
    <!-- /评论的回复列表 -->

    <!-- 评论回复弹框 -->
    <van-popup v-model="isPostShow" position="bottom">
      <comment-post 
        :target="comment.com_id" 
        :art_id="articleId"
        :list="replyCommentList"  
        @close="isPostShow=false"
        @update-comment-total="++comment.reply_count"
      />
    </van-popup>
    <!-- 评论回复弹框 -->

    <!-- 底部 -->
    <div class="post-wrap">
      <van-button @click="isPostShow=true" type="default" size="small" class="post-btn" >写评论</van-button>
    </div>
    <!-- /底部 -->
  </div>
</template>

<script>
import CommentItem from './comment-item'
import CommentList from './comment-list'
import CommentPost from './comment-post'
export default {
  name: 'CommentReply',
  components: {
    CommentItem,
    CommentList,
    CommentPost
  },
  props: {
    // 接收文章ID，传递给comment-post
    articleId:{
      type:[Object,Number,String],
      required:true
    },
    // 用于接收点击行的数据
    comment:{
      type:Object,
      required:true
    }
  },
  data () {
    return {
      replyCommentList:[],
      isPostShow:false
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {}
}
</script>

<style scoped lang="less">
.post-wrap{
  position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.17333rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-top: 0.01333rem solid #d8d8d8;
    .post-btn{
      width: 60%;
    }
}
</style>
